<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <meta name="referrer" content="no-referrer" />
      <title>Document</title>
      <style>
            * {
                  margin: 0;
                  padding: 0;
            }

            .container {
                  line-height: 1.5;
            }

            .container .wrapper {
                  position: relative;
                  zoom: 1;
                  overflow: hidden;
                  /* visibility: hidden; */
                  margin-left: auto;
                  margin-right: auto;
            }

            .container .box {
                  float: left;
                  height: auto;
                  margin: 0 20px 20px 0;
                  border-top: 0 none;
                  background-color: #fff;
                  border-radius: 2px;
                  /* position: absolute; */
                  border-bottom: 1px solid #e0e0e0;
                  width: 235px;
                  padding: 0;
                  border-radius: 2px 2px 0 0;
            }

            .box .img-box {
                  position: relative;
                  min-height: 100px;

            }

            .box .img-box img {
                  display: block;
                  margin-left: auto;
                  margin-right: auto;
                  width: 100%;
                  max-width: 235px;
            }

            .box .detail-box {
                  padding: 14px 0;
                  border-width: 0 1px 0 1px;
                  border-style: solid;
                  border-color: #e0e0e0;
            }

            .box .title {
                  padding: 0 14px;
                  clear: both;
                  overflow: hidden;
                  margin: 0;
                  font-size: 14px;
                  color: #444;
                  word-wrap: break-word;
                  word-break: break-all;
            }
      </style>
</head>

<body>
      <div class="container">
            <!-- 高度需js计算并设置 , 宽度需要设置  -->
            <div class="wrapper">
                  <!-- 设置盒子的定位 -->

            </div>
      </div>
      <script src="../libs/common.js"></script>
      <script src="../libs/jquery.js"></script>
      <script>

            class WaterFall {
                  constructor() { }
                  async init(url) {
                        this.url = url;
                        this.ch = document.documentElement.clientHeight;
                        this.wrapper = $(".wrapper");
                        let cw = document.documentElement.clientWidth;
                        this.wrapper_max_item = parseInt(cw / 255);
                        this.wrapper.style.width = this.wrapper_max_item * 255 + "px";
                        this.firstVersion();
                        //    console.log(this.wrapper);
                        this.children = getChildren(this.wrapper);
                        this.data = await this.load();

                        this.load().done((res) => {
                              this.data = res;
                              this.render();
                              this.bindEvent();
                        })
                       
                  }
                  firstVersion() {
                        var firsthtml = "";
                        this.heightArray = [];
                        //    console.log(1);
                        for (var i = 0; i < this.wrapper_max_item; i++) {
                              firsthtml += `  <div class="first-box">
                        </div>`;
                              this.heightArray.push(1);
                        }
                        this.wrapper.innerHTML = firsthtml;
                  }
                  load(attr) {
                        attr ? attr : 0;
                        //ajax传参，请求数据，返回数据
                        let data = {
                              include_fields: "top_comments,is_root,source_link,item,buyable,root_id,status,like_count,sender,album,reply_count",
                              filter_id: "摄影",
                              start: attr,
                              _: Date.now()
                        };
                        return $.ajax(this.url, {
                              dataType : "json",
                              data
                        });
                  }
                  render() {
                        let html = "";
                        let item_height = 0;
                        this.data.data.object_list.forEach(item => {
                              item_height = parseInt(235 / item.photo.width * item.photo.height)
                              html = `   
                <div class="box">
                    <div class="img-box" style="height:${item_height}px">
                            <img src="${item.photo.path}" alt="">
                    </div>
                    <div class="detail-box">
                            <div class="title">
                                ${item.msg ? item.msg : "."}
                            </div>
                    </div>
                </div>`;
                              this.minIndex = this.sortEle();
                              // console.log(this.children);
                              this.children[this.minIndex].innerHTML += html;
                              this.heightArray[this.minIndex] += 20 + item_height;
                        })
                        this.loading = false;
                        this.wrapper.style.height = this.minIndex + "px";

                  }
                  sortEle() {
                        //找到最小
                        for (var i = 0; i < this.children.length; i++) {
                              this.minHeight = Math.min.apply(false, this.heightArray);
                              let minIndex = this.heightArray.indexOf(this.minHeight);
                              return minIndex;
                              // heightArray[minIndex] += 20 + children[i].offsetHeight;
                        }
                        // 设置wrapper的高度;

                  }
                  bindEvent() {
                        console.log("调用了1");
                        window.onscroll = this.ifLoad.bind(this);
                  }
                  async ifLoad() {
                        console.log("调用了2");
                        let st = document.body.scrollTop || document.documentElement.scrollTop;
                        if (!this.loading && this.heightArray[this.minIndex] < this.ch + st) {
                              this.loading = true;
                              // 记载数据;
                              this.data = await this.load(this.data.data.next_start);
                              console.log(this.data.data.next_start);
                              this.render();
                        }

                  }
            }
            new WaterFall().init("http://localhost/dt");

      </script>
</body>

</html>